<template>
  <div class="table">
    <div class="title" v-if='title'>{{ title }}</div>
    <slot name='button'></slot>
    <el-table ref="sortableTable" size="large" :data="listData" style="width: 100%"
      @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" />
      <template v-for="propItem in propList" :key="propItem.prop" :class-name="propItem.class">
        <el-table-column v-bind="propItem" align="center" :show-overflow-tooltip='false'
          :class-name="propItem.slotName == 'operate' ? 'allow' : ''">
          <template #default="scope">
            <slot :name="propItem.slotName" :row="scope.row">
              {{ scope.row[propItem.prop] }}
            </slot>
          </template>
        </el-table-column>
      </template>
    </el-table>
    <div class="footer" v-if="showFooter">
      <slot name="footer">
        <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 20, 50, 100]"
          :small="small" :disabled="disabled" :background="background" layout="total, sizes, prev, pager, next, jumper"
          :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </slot>
    </div>
  </div>
</template>

<script>
import { defineComponent } from 'vue'
import Sortable from 'sortablejs'

export default defineComponent({
  props: {
    title: {
      type: String,
      default: ''
    },
    listData: {
      type: Array,
      required: true
    },
    listCount: {
      type: Number,
      default: 0
    },
    propList: {
      type: Array,
      required: true
    },
    showIndexColumn: {
      type: Boolean,
      default: false
    },
    showSelectColumn: {
      type: Boolean,
      default: false
    },
    total: {//页数
      type: Number,
      default: 0
    },
    pageSize: {
      type: Number,
      default: 10
    },
    page: {
      type: Object,
      default: () => ({ pageNum: 1, pageSize: 10 })
    },
    childrenProps: {
      type: Object,
      default: () => ({})
    },
    showFooter: {
      type: Boolean,
      default: true
    },
    isDrag: {
      type: Boolean,
      default: false
    }
  },
  emits: ['selectionChange', 'update:page'],
  setup(props, { emit }) {
    const applite = ref([])
    const sortedAppList = ref([])
    const sortableTable = ref('')
    const currentPage = ref(1)
    const pageSize = ref(10)
    const handleSelectionChange = (value) => {
      emit('selectionChange', value)
    }
    const handleCurrentChange = (pageNum) => {
      console.log('pageNum', pageNum)
      emit('update:page', { ...props.page, pageNum })
    }

    const handleSizeChange = (pageSize) => {
      emit('update:page', { ...props.page, pageSize })
    }
    const changeOpenList = () => {
      // 异步获取数据
      setTimeout(() => {
        // 拖拽排序初始化
        let tableEl = sortableTable.value.$el.querySelector(
          '.el-table__body-wrapper tbody'
        )
        if (tableEl) {
          sortableTable.value.sortable = new Sortable(tableEl, {
            animation: 150,
            handle: '.allow',
            onEnd: (event) => {
              applite.value = sortedAppList.value
              const movedItem = applite.value[event.oldIndex]
              applite.value.splice(event.oldIndex, 1)
              applite.value.splice(event.newIndex, 0, movedItem) // 使用插入而不是替换的方式
              sortedAppList.value = []
              nextTick(() => {
                sortedAppList.value = applite.value // 更新最终的排序后数据
              })
            }
          })
        }
        tableEl = null
      }, 1000)
    }
    if (props.isDrag) {
      changeOpenList()

    }

    return {
      handleSelectionChange,
      handleCurrentChange,
      handleSizeChange,
      changeOpenList,
      sortableTable,
      pageSize,
      currentPage, applite, sortedAppList
    }
  }
})
</script>

<style scoped lang="scss">
.table {
  margin-top: 40px;
}

.title {
  font-size: 16px;
  width: 100%;
  height: 40px;
  line-height: 40px;
  text-align: left;
  padding: 0 16px;
  border: 1px solid rgb(209, 208, 208);
  background: rgb(209, 208, 208);
  color: rgb(92, 91, 91);
}

.header {
  display: flex;
  height: 45px;
  padding: 0 5px;
  justify-content: space-between;
  align-items: center;


  .handler {
    align-items: center;
  }
}

.footer {
  margin-top: 15px;

  .el-pagination {
    text-align: right;
    float: right;
  }
}
</style>
